<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <!-- 文件选择框 -->
    <input type="file" @change="handleFileChange" accept="video/*">
    <!-- 视频播放区域 -->
    <video ref="videoRef" width="640" height="360" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 为选择的文件创建一个临时的 URL
        const objectURL = URL.createObjectURL(file);
        this.videoUrl = objectURL;
        // 设置视频元素的 src 属性
        this.$refs.videoRef.src = objectURL;
      }
    }
  },
  beforeDestroy() {
    // 释放临时 URL 资源，避免内存泄漏
    if (this.videoUrl) {
      URL.revokeObjectURL(this.videoUrl);
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>